<template>
	<view>
		<view class="bg_1"></view>
		<view class="home_top flex_row_center_center"  :style="{ top: 'calc(' + statusBarHeight + ' + 20rpx)' }">
			  <view style="margin-right: 10rpx;">{{nowYear}} 年  </view>
			  <view>{{nowMonth.toString().padStart(2, '0')}} 月</view>
		</view>
		<view class="module"  :style="{ 'padding-top': 'calc(' + statusBarHeight + ' + 120rpx)' }">
		   <view class="module-top">
			   <view class="day day_title_list">
			     <view class="day-item" v-for="(item,index) in ['日','一','二','三','四','五','六']" :key="index">
			         {{item}}
			     </view>
			   </view>
			   <!-- 日期 -->
			   <view 
			       class="threeMonth"    
			         @touchstart='touchstart'
			         @touchmove='touchmove' 
			         @touchend='touchend'
			       :style="'left:calc(-100% + '+dayLeft+'px)'"
			   >
			       <!-- 遍历集合三个月的列表 -->
			       <view class="day" 
			       >
			           <!-- 遍历每个月的天数 -->
			          <view 
			               class="day-item" 
			               v-for="(item2,index2) in monthList" 
			               :key="index2"
			               @click="dayClick(item2,index2)"
			           > 
			   				<view class="day_item_info" :class="(item2.fromMonth=='nowMonth'&& item2.day==choose_day) ? 'nowDate':''" >
			   					<view   :style="item2.fromMonth=='nowMonth'?'':'color:#c8c9cc;'">{{item2.day}}  </view>
			   					<view :style="item2.fromMonth=='nowMonth'?'':'color:#c8c9cc;'">
									<view :class="(item2.fromMonth=='nowMonth'&& item2.day==choose_day) ? 'current_special_jieri':'special_jieri'" v-if="item2.solarJieri || item2.lunarJieri || item2.lunarJieqi">{{item2.solarJieri || item2.lunarJieri || item2.lunarJieqi}}</view>
									<view v-else >{{item2.lunar}}</view>
								</view>
			   				</view>
			           </view>
			       </view>
			   </view>
		   </view>
		  
		  <view class="module-bottom">
			  <view class="module-bottom_top ">
				  <image class="module-bottom_top_image" src="@/static/images/other/lunarbg.jpg" mode="aspectFill"></image>
				  <view class="module-bottom_1 flex_row_between_center">
					  <view class="module-bottom_1_left" @click="natTo">
						  <view>{{lunarInfo.lunarDay}}</view>
						  <view>农历{{lunarInfo.lunarMonth}}月</view>
					  </view>
					  <view class="module-bottom_1_right">
						  <view>{{lunarInfo.lunarYear}}</view>
						  <view>星期{{currentWeek}}</view>
					  </view>
				  </view>
				
			  </view>
			  <view class="module-bottom_bottom">
				  <view class="flex_row_start_center">
					 <view class="con1 module-bottom_bottom_icon flex_row_center_center ">宜</view>
					 <view class="flex_row_start_center module-bottom_bottom_label ">
						 <view class="label_item" v-for="(item,index) in yi" :key="index">{{item}}</view>
					 </view>
				  </view>
				  <view class="flex_row_start_center" style="margin-top: 15rpx;">
					 <view class="con2 module-bottom_bottom_icon flex_row_center_center ">忌</view>
					<view class="flex_row_start_center module-bottom_bottom_label">
						 <view class="label_item" v-for="(item,index) in ji" :key="index">{{item}}</view>
					</view>
				  </view>
			  </view>
		  </view>
		  
		
		</view>
	</view>
</template>
 
<script>
import {Solar,SolarMonth,Lunar,HolidayUtil}from'@/pages/common/lunar.js';
import {sloarToLunar,getYearMonthDay,getDayGanzhi } from '@/utils/lunar.js'
export default {
  name: 'LunarCalendar',
  data() {
    return {
          nowYear:new Date().getFullYear(),//获取年份
		  nowMonth:new Date().getMonth()+1,//获取月份
		  nowDay:new Date().getDate(),
		  monthList:[],
		  dayLeft: 0,
		  startLeft: 0,
		  statusBarHeight:getApp().globalData.statusBarHeight+'px',
		  choose_day:'',
		  lunarInfo:'',//展示当天或者选中的那天农历信息
		  currentWeek:'',//展示当天或者选中的那天是星期几
		  yi:'',//宜
		  ji:'',//忌
    };
  },
  mounted() {
   
  },
  computed: {
    
  },
  created(){
	  this.getThreeMonth()
	  this.choose_day=this.nowDay
	  this.getLunar()
	 
  },
  methods: {
	   natTo(){
		  this.$tab.navigateTo('/pages/weather/almanac')
	   },
	   //获取当天的农历和当天星期几以及宜忌
	   getLunar(){
		  let lunarInfo=sloarToLunar(this.nowYear, this.nowMonth.toString().padStart(2, '0'),  this.choose_day)
		  this.lunarInfo=lunarInfo
		  this.currentWeek = Solar.fromDate(new Date(this.nowYear+'-'+this.nowMonth+'-'+this.choose_day)).getWeekInChinese();
	      var d = Lunar.fromDate(new Date(this.nowYear+'-'+this.nowMonth+'-'+this.choose_day))
		  //宜
		  this.yi=d.getDayYi();
		  //忌
		  this.ji=d.getDayJi();
	   },
	   dayClick(item2,index){
		   console.log(item2);
		   console.log(index);
		   if(item2.fromMonth=='lastMonth'){
			   // return false
			   this.syy()
		   }
		   if(item2.fromMonth=='nextMonth'){
			   this.xyy()
		   	  // return false
		   }
		   this.choose_day=item2.day
		   this.getLunar()
	   },
	   // 日期模块点击
		  touchstart(e){
			  // 记录初始点击位置
			  this.startLeft = e.touches[0].pageX
		  },
		  // 日期模块拖动
		  touchmove(e){
			  this.dayLeft = e.touches[0].pageX - this.startLeft
		  },
		  // 日期模块松手
		  touchend(e){
			  // 根据移动距离判断跳转上一月还是下一月
			  if(this.dayLeft>100 )this.syy()
			  if(this.dayLeft<-100 )this.xyy()
			  this.dayLeft = 0
			  this.choose_day=1
		  },
		  /*获取上一月*/
		  syy(){
			  if (this.nowMonth==1){
				  this.nowYear=parseInt(this.nowYear)-1;
				  this.nowMonth=12;
				  this.getThreeMonth();
				  return;
			  }
			  this.nowMonth=parseInt(this.nowMonth)-1;
			  this.getThreeMonth();
		  },
		  /*获取下一月*/
		  xyy(){
			  if (this.nowMonth==12){
				  this.nowYear=parseInt(this.nowYear)+1;
				  this.nowMonth=1;
				  this.getThreeMonth();
				  return;
			  }
			  this.nowMonth=parseInt(this.nowMonth)+1;
			  this.getThreeMonth();
		  },
      // 获取三月日期
		getThreeMonth(){
			this.monthList = []
			this.monthList=this.getCalendar(this.nowYear,this.nowMonth)
			// console.log('this.monthList',this.monthList);
			
		},
	  /*闰年 时间判断*/
		isLeap(year) {
			return year % 4 == 0 ? (year % 100 != 0 ? 1 : (year % 400 == 0 ? 1 : 0)) : 0;
		},
		 //获取某月日期
		getCalendar(Year,Month){
			//每个月的天数
			var days_per_month = new Array(31, 28 + this.isLeap(Year), 31, 30, 31, 30, 31, 31, 30, 31, 30, 31); 
			var dateList = []; 
			
			//获取本月的一号是星期几 0星期天
			var s=new Date(Year + '/' + Month + '/' + '01').getDay();
			//上月月份
			var lastMonth = Month==1? 12: Month-1
			//上个月年份
			var lastYear = Month==1? Year-1: Year
			
			// 上月天数
			var lastMonthDay = days_per_month[lastMonth - 1]
			// 补上 上月日期
			for(var i = s-1; i >= 0; i--) {
					var day = parseInt(lastMonthDay)-i;
					dateList.push({
						 day,
						 fromMonth: 'lastMonth',
						 lunar:getYearMonthDay(lastYear, lastMonth.toString().padStart(2, '0'),  day),
						 className: ''
					})//获取上月末尾天数  补齐本月日历显示
			 }
			 
			 
			// 当月天数
			var nowMonthDay = days_per_month[Month - 1]
			
			// 添加当月日期
			for(var j = 0; j < nowMonthDay; j++) {
				let jieri =Solar.fromYmd(this.nowYear, this.nowMonth, j+1)
				//获取农历对象  阳历转农历
				let lunarday=Lunar.fromDate(new Date(this.nowYear+'-'+this.nowMonth+'-'+(j+1)));
				// 获取传统节日
				let traditionalJieri =Lunar.fromYmd(lunarday.getYear(),lunarday.getMonth(),lunarday.getDay() );
				
				dateList.push({
					day: j+1,
					fromMonth: 'nowMonth',
					solarJieri:jieri.getFestivals()[0] || '',
					lunarJieri: traditionalJieri.getFestivals()[0] || '',
					lunarJieqi:traditionalJieri.getJieQi(),
					lunar:  getYearMonthDay(this.nowYear, this.nowMonth.toString().padStart(2, '0'), j+1),
					className: ''
				})
			}
			// console.log('dateList',dateList);
			
			//获取本月最后一天是星期几 0星期天
			var l =new Date(Year + '/' + Month + '/' + nowMonthDay).getDay();
			
			//下个月年份
			var  futureYear = Month==12? Year+1: Year
			//下月月月份
			var  futureMonth = Month==12? 1: Month+1
			
			if(l < 6){
				// 补上 下月日期
				for(var i = 1; i <= 6-l; i++) {
						
						dateList.push({
							 day: i,
							 fromMonth: 'nextMonth',
							 lunar:getYearMonthDay(futureYear, futureMonth.toString().padStart(2, '0'), i),
							 className: ''
						})
				 }
			}
			return dateList
		},
   
  }
};
</script>
 
<style lang="scss" scoped >
.bg_1 {
		position: fixed;
		top: 0;
		left: 0;
		width: 750rpx;
		height: 150rpx;
		z-index: 0;
		right: 0;
		margin: 0 auto;
		background: #9b4c3a;
	}
	.home_top{
		position: fixed;
		left: 0;
		padding: 10rpx 35rpx;
		z-index: 99;
		width: 750rpx;
		height: 88rpx;
		font-size: 32rpx;
		background-color: #9b4c3a;
		color: #fff;
		
	}
.module{
	.module-top{
		background-color: #fff;
		padding-bottom: 30rpx;
		padding-top: 10rpx;
	}
        .threeMonth{
            display: flex;
            width: 100%;
        }
        
        .title{
            font-size: 35rpx;
            font-weight: bold;
            padding-bottom: 30rpx;
        }
        
        .day{
            display: flex;
            position: relative;
            width: 100%;
            justify-content: space-around;
            flex-wrap: wrap;
            text-align: center;
            align-content: flex-start;
            
            .active{
                background-color: #1972F0;
                color: #fff;
            }
        }
		.day_title_list{
			padding-bottom: 10rpx;
			border-bottom: 2rpx solid #dadada;
		}

        
        .day-item{
            width: 14%;
			.day_item_info{
				width: 100%;
				font-size: 32rpx;
				padding-top: calc(50% - 1em);
				padding-bottom: calc(50% - 1em);
				& view:last-child{
					font-size: 20rpx;
				}
			}
        } 
		.choose_day{
			background-color: #9b4c3a;
		}
		
      .module-bottom{
		  margin-top: 20rpx;
		  background-color: #fff;
		  padding: 15rpx;
		  
		 .module-bottom_top{
			 position: relative;
			.module-bottom_top_image{
				width: 720rpx;
				height: 180rpx;
			}
			.module-bottom_1{
				position: absolute;
				left: 0;
				top: 0;
				width: 100%;
				height: 100%;
				padding: 0 100rpx;
				
				.module-bottom_1_left{
					text-align: center;
					color: #9b4c3a;
					& view:first-child{
						font-size: 40rpx;
					}
					& view:last-child{
						font-size: 28rpx;
						margin-top: 8rpx;
					}
				}
				
				.module-bottom_1_right{
					text-align: center;
					color: #9b4c3a;
					& view:first-child{
						font-size: 34rpx;
					}
					& view:last-child{
						font-size: 28rpx;
						margin-top: 8rpx;
					}
				}
			}
		 }
		  
		  .module-bottom_bottom{
			  padding: 20rpx 30rpx;
			  font-size: 28rpx;
			  color: #a1a1a1;
			  .con1{
				  background-color: #3ab349;
			  }
			  .con2{
			  	  background-color: #e34f43;
			  }
			  .module-bottom_bottom_icon{
				 color: #fff;
				 width: 50rpx;
				 height: 50rpx;
				 border-radius: 50%;
				 margin-right: 24rpx;
			  }
			  .module-bottom_bottom_label{
				  width: 616rpx;
				  flex-wrap: wrap;
			  }
			  .label_item{
				  margin-right: 12rpx;
				  
				  &:last-child{
					  margin-right: 0;
				  }
			  }
		  }
		
	  }
}
.nowDate{
	background-color: #9b4c3a;
	color: #fff;
	border-radius: 50rpx;
}
.special_jieri{
	color:  #9b4c3a;
}
.current_special_jieri{
	color: #fff;
}
</style>